<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>Journey through Space: A 3rd grade science learning module</title>
        <script src="scripts/SCORM_API_wrapper.js" language="javascript"></script>
        <script src="scripts/sessionstorage.1.4.js" language="javascript"></script>
        <script src="scripts/scripts.js" language="javascript"></script>
        <script src="scripts/asteroidhsscripts.js" language="javascript"></script>
        <link href="styles/styles.css" type="text/css" rel="stylesheet"/>
        <link href="styles/hsstyles.css" type="text/css" rel="stylesheet"/>
    </head>
    
    <body onload="javascript:visitAsteroid()">
        <div>
            <div>
                <table id="indextable">
                    <tr>
                        <td align="center"><img src="images/mercurytoon.png" height="20px" width="20px"/></td>
                        <td align="center"><img src="images/venustoon.png" height="20px" width="20px"/></td>
                        <td align="center"><img src="images/earthtoon.png" height="20px" width="20px"/></td>
                    </tr>
                        <td align="center"><img src="images/marstoon.png" height="20px" width="20px"/></td>
                        <td align="center"><img src="images/suntoon.png" height="20px" width="20px"/></td>
                        <td align="center"><img src="images/jupitertoon.png" height="20px" width="20px"/></td>
                    <tr>
                        <td align="center"><img src="images/saturntoon.png" height="20px" width="45px"/></td>
                        <td align="center"><img src="images/uranustoon.png" height="20px" width="30px"/></td>
                        <td align="center"><img src="images/neptunetoon.png" height="20px" width="20px"/></td>
                    </tr>
                </table>
            </div>
                            
            <div id="headerimage">
                <a name="top">
                <img src="images/header.jpg"
                    alt="image of module title - Journey through Space: a 3rd grade science learning module"
                    title="image of module title - Journey through Space: a 3rd grade science learning module"
                    width="82%"/>
                </a>
            </div>
        </div>
        
        <div id="nav">
            <div id="nav_wrapper">
                <ul>
                    <li><a class="show" href="welcome.html">Welcome!</a>
                    </li>
                    <li><a class="show" href="sun.html">The Sun</a>
                    </li>
                    <li><a class="show" href="#">Rocky Planets</a>
                        <ul>
                            <li><a class="show" href="terresterial.html">Rocky Planet Intro</a>
                            </li>
                            <li><a class="show" href="mercury.html">Mercury</a>
                            </li>
                            <li><a class="show" href="venus.html">Venus</a>
                            </li>
                            <li><a class="show" href="earth.html">Earth</a>
                            </li>
                            <li><a class="show" href="mars.html">Mars</a>
                            </li>
                            <li><a class="show" id="terresterialquizlink" href="terresterialquiz.html">Rocky Planets Quiz</a>
                            </li>
                        </ul>
                    </li>
                    <li><a class="show" href="moon.html">The Moon</a>
                    </li>
                    <li><span class="menu-link-inactive" class="show" href="asteroid.html">Asteroid Belt</span>
                    </li>
                    <li><a class="show" href="#">Gas Giants</a>
                        <ul>
                            <li><a class="show" href="gaseous.html">Gas Giants Intro</a>
                            </li>
                            <li><a class="show" href="jupiter.html">Jupiter</a>
                            </li>
                            <li><a class="show" href="saturn.html">Saturn</a>
                            </li>
                            <li><a class="show" href="uranus.html">Uranus</a>
                            </li>
                            <li><a class="show" href="neptune.html">Neptune</a>
                            </li>
                            <li><a class="hide" id="gaseousquizlink" href="gaseousquiz.html">Gas Giants Quiz</a>
                            </li>
                        </ul>
                    </li>
                    <li> <a class="hide" id="finalquizlink" href="endquiz.html">Final Quiz</a>
                    </li>
                    <li> <a class="hide" id="certificate" href="certificate.html">Certificate</a>
                    </li>
                </ul>
            </div>
            <!-- Nav wrapper end -->
        </div>
        <!-- Nav end -->
        
        <div>
            <article>
                <header>
                    <table align="center">
                        <tr>
                            <th><img src="images/boyastro.jpg" height="50px" width="50px"/></th>
                            <th><h1>The Asteroid Belt: The great divide</h1></th>
                            <th><img src="images/girlastro.jpg" height="50px" width="50px"/></th>
                        </tr>
                    </table>
                </header>
                
                <aside>
                    <table>
                        <tr>
                            <img src="images/asteroid.jpg"
                                alt="Image of the Asteroid Belt located between the orbits of Mars and Jupiter."
                                title="Image of the Asteroid Belt located between the orbits of Mars and Jupiter."/>
                        </tr>
                        <tr>
                            <p>The Asteroid Belt is located between 
                                the orbits of Mars and Jupiter.</p>
                        </tr> 
                        <tr>
                            <img src="images/asteroid2.jpg"
                                alt="Image of a single asteroid."
                                title="Image of a single asteroid."/>
                        </tr>
                        <tr>
                            <p>The Asteroid Belt is a massive collection of space rocks like the one shown here.</p>
                        </tr> 
                    </table>
                </aside>
                
                <section>
                    <div class="center">
                        <img src="images/asteroidcomic.png"
                            alt="Introduction comic to the Asteroid page."
                            title="Introduction comic to the Asteroid page."/>
                        <br/>
                        <audio controls>
                            <source src="audio/asteroids.mp3" type="audio/mpeg">
                            <source src="audio/asteroids.ogg" type="audio/ogg">
                            <source src="audio/asteroids.wav" type="audio/wav">
                        </audio>
                    </div>
                    
                    <h3>The Asteroid Belt's Astronomical Vocabulary</h3>
                        <p>Hover your mouse over each item to learn its definition.</p>
                
                        <table>
                            <div id="hotspots">
                                <tr>
                                    <td>
                                        <div class="column">
                                            <div id="hs1" class="hotspot" 
                                                onmouseover="javascript:showText( 1 )"
                                                onmouseout="javascript:hideOutput()"><p>Asteroid</p></div> 
                                        </div>
                                    </td>
                                    <td>
                                        <div class="column">
                                            <div id="hs2" class="hotspot" 
                                                onmouseover="javascript:showText( 2 )"
                                                onmouseout="javascript:hideOutput()"><p>Dwarf Planet</p></div>  
                                        </div>
                                    </td>
                                    <td>           
                                        <div class="column">        
                                            <div id="hs3" class="hotspot"
                                                onmouseover="javascript:showText( 3 )"
                                                onmouseout="javascript:hideOutput()"><p>Meteor</p></div> 
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="column">
                                            <div id="hs4" class="hotspot" 
                                                onmouseover="javascript:showText( 4 )"
                                                onmouseout="javascript:hideOutput()"><p>Meteorite</p></div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="column">
                                            <div id="hs5" class="hotspot" 
                                                onmouseover="javascript:showText( 5 )"
                                                onmouseout="javascript:hideOutput()"><p>Meteoroid</p></div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="column">
                                            <div id="hs6" class="hotspot" 
                                                onmouseover="javascript:showText( 6 )"
                                                onmouseout="javascript:hideOutput()"><p>Minor Planet</p></div>
                                        </div>
                                    </td>
                                </tr>
                            </div>
                        </table>
                            
                        <div id="output">
                            <div id="output-box">
                                <p id="output-text">asdf</p>
                            </div>
                        </div>
                        
                        <!--<ul>
                            <li><strong>Asteroid:</strong> Large pieces of space rock from the Asteroid belt.</li>
                            <li><strong>Dwarf Planet:</strong> A smaller planet that orbits the Sun but has 
                                not cleared its orbital path. There are dwarf planets in the Asteroid Belt. </li>
                            <li><strong>Meteor:</strong> The light seen when a space object hits the Earth’s 
                                atmosphere, sometimes referred to as a shooting star.</li>
                            <li><strong>Meteorite:</strong> The piece of a space object that land on Earth from 
                                a meteoroid.</li>
                            <li><strong>Meteoroid:</strong> The space object or debris that flies through space.</li>
                            <li><strong>Minor Planet:</strong> A space object that is smaller than a planet 
                                but is not a planet, dwarf planet or a comet.</li>
                        </ul>-->
                        
                    <p>Welcome to the Asteroid Belt! Grab a rock and get comfortable. The Asteroid 
                        Belt is made up of chunks of rock called <em>asteroids</em> and positioned 
                        between the orbits of Mars and Jupiter. They rotate around the Sun in a donut 
                       -like freeway of asteroids. They are made of silicone rock 
                        as well as nickel, carbon and iron. Another name asteroids are known by is 
                        a <em>meteor</em>. When asteroids are knocked out of orbit they fall to Earth 
                        as meteors and are sometimes called "falling stars". As the meteors enter the 
                        Earth's atmosphere they catch fire and what we see is the fiery tail which makes 
                        it look like a falling star. When you return to Earth make sure you grab an 
                        umbrella to protect your head if you ever see a "falling star".</p> 
                    
                    <h3>Interesting Facts</h3>
                        <ul>
                        	<li>The larger meteors that break through the atmosphere and hit Earth are 
                                called meteorites. Scientist have found craters on Earth as evidence.</li>
                            <li>Scientist predict that the asteroid belt was formed from dust that 
                        	    created our solar system. This makes asteroids interesting to study 
                        	    because they are made with the same materials as other planets in the 
                        	    solar system. It is thought that the asteroid belt is home to over 
                                1.9 million asteroids.</li> 
                            <li>Each asteroid behaves like a planet. Most asteroids rotate around their 
                                own axis. Some can make a full rotation in a few hours and some take 
                                a month. Some asteroids may have their own moons.</li>
                            <li>Asteroids can be different sizes. The first asteroid discovered was 
                                Ceres. It is almost as wide as Texas and because of its sphere like 
                                shape, Ceres was thought to be a <em>dwarf planet</em>, or 
                                <em>minor planet</em>. The average temperature of Ceres 
                                never reaches above -34 degrees Celsius which leads scientist to believe 
                                that its inner core may be made of frozen water.</li>
                        </ul>
                
                    <h3>Naming an Asteroid</h3>
                        <p>The International Astronomical Union, studies and names objects in the 
                            Asteroid Belt. There are several special rules about naming asteroids.</p> 
                                <ul>
                                    <li>no more than 16 characters long (including any spaces or 
                                        punctuation);</li>
                                    <li>preferably one word;</li>
                                    <li>pronounceable (in some language);</li>
                                    <li>written using Latin characters (transliterations of names from 
                                        languages not written using Latin characters are acceptable);</li>
                                    <li>non-offensive;</li>
                                    <li>not identical with or even too similar to an existing name of a 
                                        minor planet or natural planetary satellite.</li>
                                </ul>
                            <p>Approximately 13,000 asteroids have been named.</p>
                
                    <a href="#top">Back to top</a>
                </section>
            </article>
        </div>
        
        <div>
            <footer>
                <cite>All information was collected from 
                    <a href="http://www.merriam-webster.com">Merriam Webster Online: 
                        Dictionary and Thesaurus</a>, 
                    <a href="http://www.nationalgeographic.com/">National Geographic</a>, 
                    <a href="http://www.wikipedia.org">Wikipedia</a>, 
                    <a href="http://www.nasa.gov">NASA</a>, 
                    Etsy - Pretty Grafik Design</a>, &amp Etsy - Paula Kim Studio</a>
                </cite>
            </footer>
        </div>
    </body>
</html>               	